import React from "react";
import { SpinLoading } from "antd-mobile";

const style: React.CSSProperties = {
  fontSize: "10vw",
  position: "absolute",
  left: "50%",
  top: "50%",
  transform: "translate(-50%, -50%)",
};

export default function loadable(
  Component: React.LazyExoticComponent<
    (props: any) => React.ReactElement | null
  >
) {
  return function (props: any) {
    return (
      <React.Suspense fallback={<SpinLoading style={style} />}>
        <Component {...props} />
      </React.Suspense>
    );
  };
}